<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			mark {
				background-color: green;
			}

			summary {
				outline: none;
			}

		</style>
	</head>
	<body>
		

		<!-- 
			h5: 添加了很多新的标签
			    支持音频, 视频的播放
			    支持本地存储
			    废除了很多能用CSS样式代替的标签, 比如 big, center...
			    废除了很多语义不明确的标签
			    添加了canvas画布标签
		 -->
		
		<p>今天天气不错, 适合在屋里学习<mark>敲代码</mark></p>

		<!-- 
			meter 使用量(度量)标签, 当浏览器不支持该标签时, 会显示该标签内部的内容
			
			value: 当前的值
			max: 最大值
			min: 最小值
			high: 最高预警值
			low: 最低预警值

		 -->
		<meter value="19" max="100" min="0" high="80" low="20">不支持, 请下载最新浏览器</meter>


		<!-- 
			min: 最小值
			max: 最大值
			value: 当前值
		 -->
		进度条: <progress min="0" max="100" value="50"></progress>
		
		<!-- 
			合适的时机换行
		 -->
		<p>
			IloveyouhoneyIloveyouhoneyIloveyouhoneyI<wbr>loveyou<wbr>honeyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoneyIloveyouhoney
		</p>
		
		<!-- 添加拼音注释 -->
		<ruby>
			软<rt>ruǎn</rt>
			<rp>不兼容</rp>
		</ruby>

		<ruby>
			番茄<rt>🍅</rt>
			西瓜<rt>🍉</rt>
		</ruby>

		<input type="text" list="show">
		<!-- 数据列表, 支持模糊查询 -->
		<datalist id="show">
			<option value="">王力宏</option>
			<option value="">王宝强</option>
			<option value="">赵旭德</option>
			<option value="">许忘</option>
			<option value="">王大宝</option>
		</datalist>

		<!-- 
			音频标签, 支持 mp3, ogg, wav格式
			autoplay: 自动播放
			controls: 控制按键
			loop: 循环播放
			muted: 静音
		 -->
		<!-- <audio src="aqzy.mp3" autoplay controls loop muted></audio> -->

		<!-- 
			兼容写法
		 -->
		<!-- <audio autoplay controls>
			<source src="aqzy.mp3"></source>
			<source src="aqzy.ogg"></source>
			<source src="aqzy.wav"></source>
			不兼容, 请下载最新的歪哥浏览器
		</audio> -->
		
		<!-- 
			视频标签
			支持的格式 mp4 ogg webm
			poster: 占位图片
		 -->
		<!-- <video src="waige.mp4" controls -autoplay poster="zxd.jpg"></video> -->

		<!-- 
			兼容写法
		 -->
		<!-- <video autoplay controls>
			<source src="waige.mp4"></source>
			<source src="waige.ogg"></source>
			<source src="waige.webm"></source>
			不支持
		</video> -->

		<!-- 折叠信息 -->
		<!-- <details>
			<summary>电脑</summary>
			<p>256G</p>
			<p>MACBook pro</p>
			
		</details> -->

		<form action="">
			<!-- 电子邮箱输入框, 提交时会检测内容是否是邮箱地址 -->
			<input type="email">

			<!-- 网络路径 -->
			<input type="url">

			<!-- <input type="button" value="确定"> -->
			
			<!-- step: 步数 数字输入框 -->
			<input type="number" step="5">
			
			年月日:<input type="date">
			年月:<input type="month">
			年周: <input type="week">
			
			<!-- 自动聚焦 -->
			<input type="text" autofocus>
			<!-- 使不能使用 -->
			<input type="text" disabled>
			
			<!-- 不能为空, 需要填写字段 -->
			<input type="text" required>

			<!-- 提交按钮 -->
			<input type="submit">
		</form>

		
		<!-- 按钮 -->
		<button>按钮</button>
		
		<!-- 导航标签 -->
		<nav></nav>

		<!-- 头部 -->
		<header></header>


		<!-- 尾部 -->
		<footer></footer>
		
		<!-- 侧边栏 -->
		<aside></aside>

		<!-- 有独立内容的区域写到这里, 比如一个讨论区, 评论区等 -->
		<article></article>




	</body>
</html>